<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>收集表单数据</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            账号:<input type="text" v-model.trim="userInfo.account"><br/><br/>
            密码:<input type="password" v-model="userInfo.password"><br/><br/>
            年龄:<input type="number" v-model.number="userInfo.age"><br/><br/>
            性别:
            男<input type="radio" name='sex' value="男" v-model="userInfo.sex">
            女<input type="radio" name='sex' value="女" v-model="userInfo.sex"><br/><br/>
            爱好:
            吃饭<input type="checkbox" value="eat" v-model="userInfo.hobby">
            睡觉<input type="checkbox" value="sleep" v-model="userInfo.hobby">
            打豆豆<input type="checkbox" value="ddd" v-model="userInfo.hobby"><br/><br/>
            地址:
            <select v-model="userInfo.city">
                <option value="">请选择</option>
                <option value="sc">四川成都</option>
                <option value="hn">河南濮阳</option>
                <option value="sd">山东邹平</option>
            </select><br/><br/>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea><br/><br/>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://baidu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
</body>
<!--   JS   -->
    <script>
    new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                age:18,
                sex:'女',
                hobby:[],
                city:'sc',
                other:'',
                agree:''
            }
        },
        methods: {
            demo(){
                alert(1)
                console.log(this._data)
            }
        },
    })
    </script>
</html>